<template>
	<div>
		<div id="drag-right">
			<div class="mask" @click="hide" v-if="dialog" ></div>
			<transition name="slide-right"> 
				<div class="content" v-if="dialog" >
					<div class="item-title">
						分类
					</div>
					<div :class="{'item': true, 'active': indexs == item.CommodityClassifyID}" v-for="(item, index) in list" @click="items(item.CommodityClassifyID)">
						{{item.classifyName}}
					</div>
					<div class="bottom">
						<div @click="reset">重置</div>
						<div @click="submit">确认</div>
					</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			dialog: {
				type: Boolean,
				default: false
			},
			list: {
				type: [Array, Object],
				default: []
			},
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				indexs: null
			}
		},
		methods: {
			hide() {
				this.$emit('hide')
			},
			items(id) {
				this.indexs = id
			},
			submit() {
				this.$emit('success', this.indexs)
				this.$emit('hide')
			},
			reset() {
				this.indexs = null
			}
		}
	}
</script>

<style scoped lang="less">
	.slide-right-leave-active {
	     opacity: 0;
	    -webkit-transform: translate(100%, 0);
	    transform: translate(100%, 0);
	    transition: 0.5s;
	}
	
	.slide-right-enter-active {
		transition: 0.5s;
	}
	
	.slide-right-enter {
	     opacity: 0;
	    -webkit-transform: translate(100%, 0);
	    transform: translate(100% 0);
	}
	
	#drag-right {
		
		.mask {
			position: fixed;
			z-index: 100;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,.6);
		}
		
		.content {
			position: fixed;
			right: 0;
			top: 0;
			width: 70%;
			z-index: 101;
			padding: 10px 5px;
			height: 100%;
			background: #fff;
			
			.item-title {
				padding: 0 10px;
			}
			
			.item {
				float: left;
				padding: 5px 10px;
				background: #eee;
				border-radius: 5px;
				margin: 5px;
			}
			
			.active {
				background: #c9eb59;
				color: #fff;
			}
			
			.bottom {
				position: absolute;
				bottom: 10px;
				width: 60%;
				right: 10%;
				background: #DB4437;
				border-radius: 99px;
				text-align: center;
				color: #fff;
				display: flex;
				overflow: hidden;
				
				div {
					flex: 1;
					padding: 5px 0;
					
					&:first-child {
						background: #F0AD4E;
					}
				}
			}
		}
	}
</style>